import {ItemInterface, ReactSortable, ReactSortableProps} from 'react-sortablejs';
import React, {FC} from "react";
import {GroupOptions, SortableEvent} from "sortablejs";
// @ts-ignore
import styled from "styled-components";

interface IProps<T extends ItemInterface> extends ReactSortableProps<T> {
  noSort?: boolean
  containerId?: string | number
  isPut?: boolean | ((activeId: string, overId: string) => boolean)
}

interface IDefaultProps {
  group?: string | GroupOptions,
  sort?: boolean,
}

const ListB = styled.div`
  border: 1px solid red;
  width: 50%;
  margin: 10px auto;
  padding: 20px;
`;
const Container: FC<IProps<any>> = (props) => {
  const {children, noSort, containerId = 'shared', isPut = true, ...theRest} = props;
  // 默认为拖出容器与放置容器
  let defaultProps: IDefaultProps = {
    group: {
      name: '' + containerId,
      pull: true,
      put: function (to: any, from: any, dragEl: HTMLElement, event: SortableEvent) {
        if (typeof isPut === 'function') {
          // @ts-ignore
          return isPut(dragEl.getAttribute('data-id'), to.options.group.name);
        }
        return isPut;
      }
    },
  };
  // 不可排序，则为拖出容器
  if (noSort) {
    defaultProps = {
      group: {
        name: 'shared',
        pull: 'clone',
        put: false
      },
      sort: false
    };
  }
  return (
    <ReactSortable
      animation={200}
      multiDrag

      {...defaultProps}
      {...theRest}
    >
      {children}
    </ReactSortable>
  );
};
export default Container;
